<template>
  <div>
    <a-card v-if="!xmlFrame.open || xmlView">
      <div class="text-wrapper_front_3 flex-row">
        <span class="text_front_12" @click="showTable('tableA')">全部公告</span>
        <span class="text_front_13" @click="showTable('tableB')">部门公告</span>
        <span class="text_front_14" @click="showTable('tableC')">分公司通知</span>
      </div>
      <div>
        <div class="box_7 flex-col" v-show="tableA"></div>
        <div class="box_7 flex-col" v-show="tableB" style="margin-left: 110px"></div>
        <div class="box_7 flex-col" v-show="tableC" style="margin-left: 204px"></div>
      </div>
      <!-- <a-button type="primary" style="color: #727272 100%;" @click="showTable('tableA')">全部公告</a-button>
      <a-button type="primary" style="color: #727272 100%;" @click="showTable('tableB')">部门公告</a-button>
      <a-button type="primary" style="color: #727272 100%;" @click="showTable('tableC')">分公司公告</a-button> -->
      <BasicTable v-show="tableA" @register="registerTable" :api="getListSend" :rowSelection="rowSelection">
        <template #tableTitle>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="batchHandleDelete">
                  <Icon icon="ant-design:delete-outlined"></Icon>
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button
              >批量操作
              <Icon style="fontsize: 12px" icon="ant-design:down-outlined"></Icon>
            </a-button>
          </a-dropdown>
        </template>
        <template #action="{ record }">
          <TableAction :actions="getActions(record)" />
        </template>
      </BasicTable>
      <!-- 部门公告 -->
      <BasicTable v-show="tableB" @register="registerTable" :api="getDepartList" :rowSelection="rowSelection">
        <template #tableTitle>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="batchHandleDelete">
                  <Icon icon="ant-design:delete-outlined"></Icon>
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button
              >批量操作
              <Icon style="fontsize: 12px" icon="ant-design:down-outlined"></Icon>
            </a-button>
          </a-dropdown>
        </template>
        <template #action="{ record }">
          <TableAction :actions="getActions(record)" />
        </template>
      </BasicTable>
      <!-- 分公司公告 -->
      <BasicTable v-show="tableC" @register="registerTable" :api="getCompanyList" :rowSelection="rowSelection">
        <template #tableTitle>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="batchHandleDelete">
                  <Icon icon="ant-design:delete-outlined"></Icon>
                  删除
                </a-menu-item>
              </a-menu>
            </template>
            <a-button
              >批量操作
              <Icon style="fontsize: 12px" icon="ant-design:down-outlined"></Icon>
            </a-button>
          </a-dropdown>
        </template>
        <template #action="{ record }">
          <TableAction :actions="getActions(record)" />
        </template>
      </BasicTable>
    </a-card>

    <div>
      <a-card id="77777" v-if="xmlFrame.open && !xmlView" style="max-height: 100%; overflow-y: auto">
        <!-- <div class="box_11 flex-col"> -->
        <div class="text-wrapper_3 flex-row">
          <span
            class="text_12"
            @click="
              () => {
                xmlFrame.open = false;
              }
            "
            >返回</span
          >
          <span class="text_13">&lt;&lt;</span>
        </div>
        <div class="noticeContent">
          <div class="text-wrapper_4 flex-row">
            <span class="text_14">{{ cardView.titile }}</span>
          </div>
          <div class="text-wrapper_5 flex-row justify-between">
            <span class="text_15">类别：{{ cardView.msgCategory_dictText }}</span>
            <span class="text_16">发布人：{{ cardView.sender }}</span>
            <span class="text_17">发布时间：{{ cardView.sendTime }}</span>
          </div>
          <div class="text_19">摘要：{{ cardView.msgAbstract }}</div>
          <div class="group_9 flex-row">
            <div class="text-wrapper_6">
              <span class="paragraph_1" v-html="cardView.msgContent"></span>
            </div>
          </div>
          <div class="text_front_1"></div>
          <div class="text-wrapper_7" v-if="fieldList.length > 0">
            <span class="text_18">附件下载：</span>
            <div class="annexDownInfo">
              <span class="annexDown" v-for="(file, index) in fieldList" :key="index">
                <a @click="dowmFile(file)">{{ file }}</a>
              </span>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts" name="system-notice" setup>
  import { ref, reactive, nextTick, onMounted } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import NoticeModal from './NoticeModal.vue';
  import DetailModal from './DetailModal.vue';
  import { useMethods } from '/@/hooks/system/useMethods';
  import { useGlobSetting } from '/@/hooks/setting';
  import { queryById } from './notice.api';
  import { getToken } from '/@/utils/auth';
  import { columns, searchFormSchema } from './notice.data';
  import {
    getListSend,
    deleteNotice,
    batchDeleteNotice,
    getExportUrl,
    getImportUrl,
    doReleaseData,
    doReovkeData,
    getDepartList,
    getCompanyList,
  } from './notice.api';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useRoute } from 'vue-router';
  import { defHttp } from '/@/utils/http/axios';
  const glob = useGlobSetting();
  const [registerModal, { openModal }] = useModal();
  const [register, { openModal: openDetail }] = useModal();
  const iframeUrl = ref('');

  const route = useRoute();
  const tableA = ref(true);
  const tableB = ref(false);
  const tableC = ref(false);
  const noticeId = ref();

  function showTable(value) {
    console.log('切表', value);

    if (value === 'tableA') {
      tableA.value = true;
      tableB.value = false;
      tableC.value = false;
    } else if (value === 'tableB') {
      tableA.value = false;
      tableB.value = true;
      tableC.value = false;
    } else if (value === 'tableC') {
      tableA.value = false;
      tableB.value = false;
      tableC.value = true;
    }
    console.log(tableA.value, tableB.value, tableC.value);
  }

  // 列表页面公共参数、方法
  const { prefixCls, onExportXls, onImportXls, tableContext, doRequest } = useListPage({
    designScope: 'notice-template',
    tableProps: {
      title: '消息通知',
      // api: getList,
      columns: columns,
      useSearchForm: false, //控制页面是否使用查询条件
      //可以直接在表格设置中添加表格的查询条件
      // formConfig: {
      //   schemas: searchFormSchema,
      // },
      showIndexColumn: true,
      tableSetting: {
        // 是否显示刷新按钮
        redo: false,
        // 是否显示尺寸调整按钮
        size: false,
        // 是否显示字段调整按钮
        setting: false,
        // 是否显示全屏按钮
        fullScreen: false,
      },
    },
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

  let xmlData = ref('');
  let xmlShow = ref(true);
  let xmlView = ref(false);
  let xmlFrame = reactive({
    width: '70%',
    title: '公告详情',
    open: false,
    src: '',
  });
  function handleLoadXml(value) {
    console.log('xmlFrame1', xmlFrame);
    //新增
    xmlData.value = '';
    xmlView.value = false;
    xmlFrame.open = true;
    xmlFrame.title = '公告详情';
    xmlShow.value = false;
    console.log('xmlFrame2', xmlFrame);
    console.log('xmlView', xmlView);
    nextTick(() => {
      xmlShow.value = true;
    });
    xmlFrame.width = '90%';
  }

  /** 下载文件 */
  function dowmFile(file) {
    const fileUrl = 'http://10.89.208.24:9999/sys/common/static/temp/' + file;
    const link = document.createElement('a');
    link.href = fileUrl;
    link.setAttribute('download', ''); // 设置下载属性，确保在点击链接时会下载文件
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // 点击后移除动态创建的链接
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
    });
  }

  /**
   * 编辑事件
   */
  function handleEdit(record) {
    openModal(true, {
      record,
      isUpdate: true,
    });
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteNotice({ id: record.id }, reload);
  }

  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    doRequest(() => batchDeleteNotice({ ids: selectedRowKeys.value }));
  }
  /**
   * 发布
   */
  async function handleRelease(id) {
    await doReleaseData({ id });
    reload();
  }
  /**
   * 撤销
   */
  async function handleReovke(id) {
    await doReovkeData({ id });
    reload();
  }

  // 在组件挂载后获取路由参数并执行操作
  onMounted(() => {
    console.log('页面路由信息', route.query.yn);
    if (route.query.yn === 'true') {
      //从首页进来的
      // 获取传递过来的参数
      noticeId.value = route.query.id as string;
      console.log('noticeId', noticeId.value);
      queryById({ id: noticeId.value }).then((record) => {
        console.log('record', record);
        // 执行相应的操作
        handleDetail(record);
      });
    }
  });

  let cardView = ref();
  let fieldList = ref([]);
  /**
   * 查看
   */
  function handleDetail(record) {
    cardView = record;
    console.log(record.annex !== null);
    fieldList.value = [];
    if (record.annex !== null) {
      const list = record.annex.split(',');
      list.forEach((e) => {
        fieldList.value.push(e.split('/')[1]); // 使用 .value 来访问和修改 ref 的值
      });
    }
    handleLoadXml(record);
  }
  /**
   * 操作列定义
   * @param record
   */
  function getActions(record) {
    return [
      // {
      //   label: '编辑',
      //   onClick: handleEdit.bind(null, record),
      //   ifShow: record.sendStatus == 0,
      // },
      {
        label: '查看',
        onClick: handleDetail.bind(null, record),
      },
    ];
  }
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    console.log('record', record);
    return [
      {
        label: '删除',
        ifShow: record.sendStatus != 1,
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: '发布',
        ifShow: record.sendStatus == 0,
        onClick: handleRelease.bind(null, record.id),
      },
      {
        label: '撤销',
        ifShow: record.sendStatus == 1,
        popConfirm: {
          title: '确定要撤销吗？',
          confirm: handleReovke.bind(null, record.id),
        },
      },
      {
        label: '查看',
        onClick: handleDetail.bind(null, record),
      },
    ];
  }
</script>
<style>
  .ant-card-body {
    padding: 16px 16px 30px 16px;
  }
  .box_7 {
    background-color: rgba(0, 150, 136, 1);
    width: 90px;
    height: 4px;
    margin: 4px 0 0 16px;
  }

  .box_11 {
    height: 790px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNG214df262b336b51b57a7494dd87a662f.png) 100% no-repeat;
    background-size: 100% 100%;
    width: 1680px;
    margin: 16px 0 0 16px;
  }

  .text-wrapper_3 {
    position: relative;
    /* width: 36px; */
    /* height: 20px; */
    /* margin: 16px 0 0 38px; */
    font-size: 14px;
    line-height: 20px;
    color: #009688;
  }

  .text_12 {
    overflow-wrap: break-word;
    color: rgba(0, 150, 136, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin-left: 28px;
  }

  .text_13 {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(0, 150, 136, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 20px;
  }

  .noticeContent {
    width: 100%;
    padding: 0 13%;
    box-sizing: border-box;
  }

  .text-wrapper_4 {
    /* width: 290px; */
    /* height: 30px; */
    /* margin: 36px 0 0 695px; */
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    margin: 36px auto 12px auto;
  }

  .text_14 {
    width: 290px;
    height: 30px;
    overflow-wrap: break-word;
    color: rgba(114, 114, 114, 1);
    font-size: 20px;
    font-family: Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }

  .text-wrapper_5 {
    /* width: 431px; */
    /* height: 22px; */
    /* margin: 12px 0 0 624px; */
    text-align: center;
  }

  .text_15 {
    /* width: 98px; */
    /* height: 22px; */
    overflow-wrap: break-word;
    color: rgba(183, 182, 182, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin: 20px 0;
    /* margin-left: -100px; */
  }

  .text_16 {
    width: 84px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(183, 182, 182, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-left: 30px;
  }

  .text_17 {
    width: 189px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(183, 182, 182, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
    margin-left: 30px;
  }

  .group_9 {
    /* width: 1240px; */
    /* height: 314px; */
    /* margin: 36px 0 0 220px; */
  }

  .text-wrapper_6 {
    /* width: 1240px; */
    /* height: 314px; */
    overflow-wrap: break-word;
    font-size: 0;
    font-family: Noto Sans SC-Regular;
    font-weight: normal;
    text-align: justified;
    line-height: 22px;
    color: #a5a5a5;
    font-size: 14px;
  }

  .paragraph_1 {
    /* width: 1240px; */
    /* height: 314px; */
    overflow-wrap: break-word;
    color: rgba(147, 156, 154, 1);
    font-size: 14px;
    font-family: Noto Sans SC-Regular;
    text-align: justify;
    line-height: 22px;
  }
  .paragraph_1 img {
    max-width: 100%;
  }

  .paragraph_2 {
    width: 1240px;
    height: 314px;
    overflow-wrap: break-word;
    color: rgba(165, 165, 165, 1);
    font-size: 14px;
    font-family: Noto Sans SC-Regular;
    font-weight: NaN;
    text-align: justified;
    line-height: 22px;
  }

  .paragraph_3 {
    width: 1240px;
    height: 314px;
    overflow-wrap: break-word;
    color: rgba(147, 156, 154, 1);
    font-size: 14px;
    font-family: Noto Sans SC-Regular;
    font-weight: NaN;
    text-align: justified;
    line-height: 22px;
  }

  .text-wrapper_7 {
    margin-top: 25px;
    display: flex;
  }

  .text_18 {
    height: 22px;
    color: rgba(114, 114, 114, 1);
    font-size: 14px;
    font-family: 'Microsoft YaHei';
    text-align: right;
    line-height: 22px;
    margin-right: 8px;
  }
  .annexDown {
    display: flex;
  }
  .annexDown a {
    font-family: '微软雅黑';
    font-size: 14px;
    color: #009688;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .text_19 {
    overflow-wrap: break-word;
    color: #a5a5a5;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: normal;
    text-align: left;
    /* white-space: nowrap; */
    line-height: 20px;
    display: block;
    margin: 36px 0 20px 0;
  }

  .text-wrapper_8 {
    width: 173px;
    height: 20px;
    margin: 7px 0 66px 288px;
  }

  .text_20 {
    width: 173px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(0, 150, 136, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 20px;
  }

  .text-wrapper_front_3 {
    width: 251px;
    height: 20px;
    margin: 16px 0 0 33px;
  }

  .text_front_12 {
    width: 56px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(114, 114, 114, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
  }

  .text_front_13 {
    width: 56px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(146, 145, 145, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin-left: 38px;
  }

  .text_front_14 {
    width: 70px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(146, 145, 145, 1);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular;
    font-weight: NaN;
    text-align: center;
    white-space: nowrap;
    line-height: 20px;
    margin-left: 31px;
  }

  .text_front_1 {
    width: 100%;
    height: 1px;
    background: #939c9a;
    opacity: 1;
    margin: 36px 0 0 0;
  }
</style>
